
import { defineStore } from 'pinia'
import { ref, watchEffect, reactive, computed, watch } from 'vue'
import *  as util from '@/amtf/utils'
import 提示 from '@/amtf/hooks/提示';
import useApi from '@/amtf/api/增查api';

export default defineStore('设置', () => {
  console.log(`设置 ing👇`)
  const api = useApi('/lysd/shezhi');
  const 单项组 = reactive([])
  // const 商品可选属性 = reactive({})

  let 监听变化 = true
  const 变化了 = ref(false)

  async function 初始化() {
    变化了.value = false
    const res = await api.查()
    if (res.code === 0) {
      监听变化 = false
      util.数组重予(单项组, res.data.list)
      // res.data.list.forEach(item => {
      //     单项组[item.名称] = item
      // });
    }
  }
  初始化()

  // const 单项树 = reactive({})
  // const 成单项树 = () => {
  //   单项组.forEach(el => {
  //     const 内容组 = el.内容
  //     let arr = 内容组.map(内容 => {
  //       return { label: 内容, value: 内容 }
  //     })
  //     单项树[el.名称] = arr
  //   });
  //   // console.log(`单项树 👉`, 单项树)
  // }

  const 单项树 = computed(() => {
    const 树 = {}
    单项组.forEach(el => {
      const 内容组 = el.内容
      let arr = 内容组.map(内容 => {
        // console.log("item", item);
        return { label: 内容, value: 内容 }
      })
      树[el.名称] = arr
    });
    // console.log(`树 👉`,树)
    return 树
  })

  const 提交 = async () => {
    let res
    res = await api.改(单项组)
    if (res.code === 0) {
      提示()
      初始化()
    }
  }

  watch(单项组, (newValue, oldValue) => {
    // console.log(`设置变化 ing👇`)
    // console.log(`监听变化 👉`, 监听变化)
    if (监听变化) {
      变化了.value = true
    }
    监听变化 = true
    // 成单项树()
  })

  return { 单项组, 变化了, 初始化, 提交, 单项树 }
}, {
  persist: {
    pick: ['单项组']
  }
})